<%@ page import="com.ws.haungjia.utils.Res" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人数据中心</title>
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            color: #333;
            background-color: #f5f5f5;
        }

        .profile-section {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            position: relative;
        }

        .avatar-container {
            position: relative;
            margin-right: 15px;
        }

        .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #eee;
        }

        .avatar-edit {
            position: absolute;
            bottom: 0;
            right: 0;
            background-color: #1890ff;
            color: white;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            cursor: pointer;
        }

        .profile-info {
            flex: 1;
        }

        .profile-name {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .profile-id {
            font-size: 14px;
            color: #666;
        }

        h1 {
            font-size: 24px;
            margin-bottom: 20px;
            color: #000;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }

        h2 {
            font-size: 18px;
            margin: 25px 0 15px 0;
            color: #000;
        }

        h3 {
            font-size: 16px;
            margin: 20px 0 10px 0;
            color: #000;
        }

        .section {
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .divider {
            border-top: 1px solid #eee;
            margin: 15px 0;
        }

        .stats {
            font-size: 24px;
            font-weight: bold;
            margin: 5px 0;
        }

        .subtext {
            font-size: 14px;
            color: #666;
            margin: 5px 0;
        }

        .trip-item {
            margin: 10px 0;
            padding-left: 10px;
            border-left: 3px solid #1890ff;
        }

        .trip-title {
            font-weight: bold;
            margin-bottom: 5px;
        }

        .trip-date {
            font-size: 14px;
            color: #666;
        }

        .login-prompt {
            text-align: center;
            color: #1890ff;
            margin-top: 30px;
            font-weight: bold;
        }

        /* Avatar modal styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 100;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }

        .modal-content {
            background-color: white;
            margin: 10% auto;
            padding: 20px;
            border-radius: 8px;
            width: 90%;
            max-width: 400px;
        }

        .modal-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
        }

        .avatar-preview-container {
            display: flex;
            justify-content: space-between;
            margin: 15px 0;
        }

        .avatar-preview-box {
            text-align: center;
            width: 48%;
        }

        .avatar-preview {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #eee;
            margin-bottom: 10px;
        }

        .avatar-label {
            font-size: 14px;
            color: #666;
        }

        .file-input-wrapper {
            position: relative;
            margin: 15px 0;
        }

        .file-input-label {
            display: block;
            padding: 10px;
            background-color: #1890ff;
            color: white;
            text-align: center;
            border-radius: 4px;
            cursor: pointer;
        }

        .file-input {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            cursor: pointer;
        }

        .modal-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
        }

        .modal-btn {
            padding: 8px 15px;
            margin-left: 10px;
            border-radius: 4px;
            cursor: pointer;
        }

        .cancel-btn {
            background-color: #f5f5f5;
            border: 1px solid #d9d9d9;
        }

        .confirm-btn {
            background-color: #1890ff;
            color: white;
            border: none;
        }
    </style>
</head>
<body>
<div class="profile-section">
    <div class="avatar-container">
        <img class="avatar" src="<%=Res.fileUri%>${list.touxiang}" alt="用户头像" id="currentAvatar">
        <div class="avatar-edit" onclick="openAvatarModal()">✎</div>
    </div>
    <div class="profile-info">
        <div class="profile-name">${list.name}</div>
        <div class="profile-id">手机号: ${list.shouji}</div>
    </div>
</div>

<h1>个人数据中心</h1>

<div class="section">
    <h2>账号</h2>
    <div class="subtext">注册于: <fmt:formatDate value="${list.zhuceshijian}" pattern="yyyy-MM-dd HH:mm:ss" /></div>
    <div class="subtext" style="color: #1890ff; cursor: pointer;"><a href="${ pageContext.request.contextPath}/geren/huixian?id=${list.userID}">修改</a></div>

    <h3>累计订单</h3>
    <div class="stats">23</div>
    <div class="subtext">本月新增5笔</div>
</div>

<div class="divider"></div>

<div class="section">
    <h3>手机绑定：${list.shouji}</h3>
</div>

<div class="divider"></div>

<div class="section">
    <h3>最近行程</h3>
    <div class="trip-item">
        <div class="trip-title">三亚自由行</div>
        <div class="trip-date">2024-02-14 至 2024-02-18</div>
    </div>
</div>

<div class="divider"></div>

<div class="section">
    <h3>行政详情</h3>
    <div class="trip-item">
        <div class="trip-title">北京文化游</div>
        <div class="trip-date">2024-03-10（待出行）</div>
    </div>
</div>

<!-- Avatar Modal -->
<div id="avatarModal" class="modal">
    <div class="modal-content">
        <div class="modal-title">修改头像</div>
        <form id="avatarForm" action="${pageContext.request.contextPath}/qian/xiugai" method="post" enctype="multipart/form-data">
            <input type="hidden" name="id" value="${list.userID}">
            <input type="hidden" name="name" value="${list.name}">
            <input type="hidden" name="shouji" value="${list.shouji}">
            <input type="hidden" name="pass" value="${list.pass}">

            <div class="avatar-preview-container">
                <div class="avatar-preview-box">
                    <img class="avatar-preview" src="<%=Res.fileUri%>${list.touxiang}" alt="当前头像" id="oldAvatarPreview">
                    <div class="avatar-label">当前头像</div>
                </div>
                <div class="avatar-preview-box">
                    <img class="avatar-preview" src="<%=Res.fileUri%>${list.touxiang}" alt="新头像" id="newAvatarPreview">
                    <div class="avatar-label">新头像预览</div>
                </div>
            </div>

            <div class="file-input-wrapper">
                <label class="file-input-label">
                    选择新头像
                    <input type="file" name="image" id="avatarInput" class="file-input" accept="image/*">
                </label>
            </div>

            <div class="modal-actions">
                <button type="button" class="modal-btn cancel-btn" onclick="closeAvatarModal()">取消</button>
                <button type="submit" class="modal-btn confirm-btn">确认修改</button>
            </div>
        </form>
    </div>
</div>

<script>
    // Open avatar modal
    function openAvatarModal() {
        document.getElementById('avatarModal').style.display = 'block';
    }

    // Close avatar modal
    function closeAvatarModal() {
        document.getElementById('avatarModal').style.display = 'none';
    }

    // Preview new avatar when selected
    document.getElementById('avatarInput').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(event) {
                document.getElementById('newAvatarPreview').src = event.target.result;
            };
            reader.readAsDataURL(file);
        }
    });

    // Close modal when clicking outside
    window.onclick = function(event) {
        const modal = document.getElementById('avatarModal');
        if (event.target === modal) {
            closeAvatarModal();
        }
    }
</script>

</body>
</html>